<template>
  <div class="mind-map-wrap">
    <svg id="markmapPrev" ref="svgRef" :style="style" />
    <div class="download" @click="downloadMindmap">下载</div>
  </div>
</template>

<script>
import { Transformer } from "markmap-lib";
// import { Markmap, loadCSS, loadJS } from "markmap-view/dist/index.esm";
import { saveAs } from "file-saver";
export default {
  name:'',
  props:{
    content: {
      type: String,
      required: true,
      default: ""
    },
    style: {
      type: Object,
      default: () => ({
        width: "100%",
        minHeight: "100%"
      })
    }
  },
  data(){
    return {
      mm:null,
      transformer:null
    }
  },

  methods:{
    init(){
      this.mm = Markmap.create(this.$refs.svgRef);
      this.transformer = new Transformer();
      this.update();
    },
    update(){
      const { root, features } = this.transformer.transform(content.value);
      const { styles, scripts } = this.transformer.getUsedAssets(features);
      if (styles) loadCSS(styles);
      if (scripts) loadJS(scripts, { getMarkmap: () => window.markmap });
      rootRef.value = root;
      this.mm.setData(root);
      this.mm.fit();
    },
    downloadMindmap(){
      // const svgEl = document.querySelector("#markmapPrev");
      // const svgData = new XMLSerializer().serializeToString(svgEl);
      // const blob = new Blob([svgData], { type: "image/svg+xml" });
      // saveAs(blob, "mindmap.svg");
    }
  },

  watch:{},
  computed:{},

  created(){},
  mounted(){},
  beforeDestroy(){}

}

</script>
  
  
  <style lang="scss" scoped>
.mind-map-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  .download {
    position: absolute;
    right: 100px;
    top: 100px;
    color: #fff;
    background: #1890ff;
    border-color: #1890ff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px #0000000b;
    padding: 4px 15px;
    border-radius: 4px;
    cursor: pointer;
  }
}
</style>